<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
        function fun1() {
            var name = document.getElementById("username");
            console.log(name);
        }
        function fun2() {
            var arr = document.getElementsByTagName("input");
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
        }
        function fun3() {
            var arr = document.getElementsByName("aaa");
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
        }
        function fun4() {
            var arr = document.getElementsByClassName("a");
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
        }
        function fun4() {
            var arr = document.getElementsByClassName("a");
            for (var i = 0; i < arr.length; i++) {
                console.log(arr[i]);
            }
        }
        function fun5() {
            var div = document.getElementById("username");
            var fuqin = div.parentElement;
            console.log(fuqin);
        }
        function fun6() {
            var input = document.getElementById("div01");
            var fuqin = input.children;
            for (var i = 0; i < fuqin.length; i++) {
                console.log(fuqin[i]);
            }
        }
        function fun7() {
            // var input = document.getElementById("password");
            // // 获取当前元素的下一个兄弟元素
            // var next = input.nextElementSibling;
            // // 如果有下一个兄弟元素，则输出
            // var shang = input.previousElementSibling;
            // console.log(shang);
            // console.log(next);
            var input = document.getElementById("username");
            input.type = "button"
            input.style.backgroundColor = "blue";

        }
    </script>
</head>

<body>
    <div id="div01">
        <input type="text" class="a" id="username" name="aaa" />
        <input type="text" class="b" id="password" name="aaa" />
        <input type="text" class="a" id="email" />
        <input type="text" class="b" id="address" />
    </div>
    <input type="text" class="a" /><br />

    <hr />
    <input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05" />
    <input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06" />
    <input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()" id="btn07" />
    <hr />

    <input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01" />
    <input type="button" value="根据标签名获取多个元素" onclick="fun2()" id="btn02" />
    <input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03" />
    <input type="button" value="根据class属性值获得多个元素" onclick="fun4()" id="btn04" />
</body>

</html>